<template>
    <div id="scatter"> 
        <div class="rightChart3">
            <div class="scatterChart" style="width:430px;height:230px" ref="scatterChart">

            </div>
        </div>
    </div>
</template>

<script type="text/javascript">

    import * as echarts from 'echarts'
    // 小气泡
    var img = '';
    
//偏移量
    var offsetData = [
        [5, 15],
        [30, 60],
        [23, 15],
        [55, 33],
        [5, 48],
        [50, 8],
        [40, 33],
        [55, 66],
        [20, 48],
        [45, 50],
        [40, 10], 
    ];
    //symbolSize 散点气泡大小
    var symbolSizeData = [120,105, 95, 90, 95, 65,120,105, 95, 90, 95];
    export default {
        name: "",
        components: {
        },
        data() {
            return {
                scatterChart: '',
                option: '',
                maxValue:0,
                datas:[],
                data: [
                    {
                        name: '临汾',
                        value: 14
                    },
                    {
                        name: '忻州',
                        value: 12
                    },
                    {
                        name: '吕梁',
                        value: 12
                    },
                    {
                        name: '运城',
                        value: 12
                    },
                    {
                        name: '大同',
                        value: 10
                    },
                    {
                        name: '晋中',
                        value: 10
                    },
                    {
                        name: '长治',
                        value: 10
                    },
                    {
                        name: '太原',
                        value: 7
                    },
                    {
                        name: '晋城',
                        value: 6
                    },
                    {
                        name: '朔州',
                        value: 4
                    },
                    {
                        name: '阳泉',
                        value: 3
                    }
                ]
            }
        },
        mounted() {
            this.symbolSize()
            this.dataInit()
            setTimeout(_=>{
                this.draw()
            },2000) 
        },
        methods: {
            symbolSize(){
                let temp=[]
                let data=this.data
                    data.forEach((item) => {
                        temp.push(item.value)
                    })
                    this.maxValue = Math.max.apply(null, temp) 
            },
            wordLength(value){
                let ret = ""; //拼接加\n返回的类目项
                let maxLength = 4; //每项显示文字个数
                let valLength = value.length; //X轴类目项的文字个数
                let rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                if (rowN > 1) //如果类目项的文字大于3,
                {
                    for (let i = 0; i < rowN; i++) {
                        let temp = ""; //每次截取的字符串
                        let start = i * maxLength; //开始截取的位置
                        let end = start + maxLength; //结束截取的位置
                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                        temp = value.substring(start, end) + "\n";
                        ret += temp; //凭借最终的字符串
                    }
                    return ret;
                } else {
                    return value;
                }
            },
            dataInit(){ 
                this.data.forEach((v,i)=>{   
                    this.datas.push({
                        name: this.wordLength(v.name) + "\n" + v.value + "个",
                        value: offsetData[i],
                        symbolSize: (v.value * 70 * 1.2) / (this.maxValue),
                        label: {
                            normal: {
                                textStyle: {
                                    fontSize: 14
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.RadialGradient(0.3, 0.5, 0.7, [{
                                        offset: 0,
                                        color: "rgba(31,102,162,0)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(31,102,192,0.6)"
                                    }
                                ]),
                                opacity: 0.8,
                                shadowColor: '#2e78eca8',
                                shadowBlur: 10,
                                shadowOffsetX: 1,
                                shadowOffsetY: 1,
                            },

                        }
                    });
                })

            },
            draw() {
                this.scatterChart = echarts.init(this.$refs.scatterChart)
                this.option = {
                    grid: {
                        show: false,
                        top: 10,
                        bottom: 10
                    },
                    xAxis: [{
                        gridIndex: 0,
                        type: "value",
                        show: false,
                        min: 0, 
                        nameLocation: "middle",
                        nameGap: 5,
                        maxValue:80,
                    }],
                    yAxis: [{
                        gridIndex: 0,
                        min: 0,
                        show: false, 
                        nameLocation: "middle",
                        nameGap: 30
                    }],

                    series: [{
                        type: "scatter",
                        symbol: "circle",
                        symbolSize: 120,
                        label: {
                            normal: {
                                show: true,
                                formatter: "{b}",
                                color: "#fff",
                                textStyle: {
                                    fontSize: "20"
                                }
                            }
                        },
                        animationDurationUpdate: 1000,
                        animationEasingUpdate: 1000,
                        animationDelay: function (idx) {
                            // 越往后的数据延迟越大
                            return idx * 50;
                        },
                        itemStyle: {
                            normal: {
                                color: "#00acea"
                            }
                        },
                        data: this.datas
                    }],
                    // graphic: [
                    //     {
                    //         type: 'image',
                    //         id: 'logo',
                    //         left: '45%',
                    //         bottom: '30%',
                    //         z: -10,
                    //         bounding: 'raw',
                    //         origin: [675, 5],
                    //         //  position: [100, 0], // 平移，默认值为 [0, 0]。
                    //         style: {
                    //             image: img,
                    //             width: 120,
                    //             height: 120,
                    //             opacity: 0.4
                    //         }
                    //     },
                    //     {
                    //         type: 'image',
                    //         id: 'logo1',
                    //         right: '14%',
                    //         bottom: '0',
                    //         z: -10,
                    //         bounding: 'raw',
                    //         origin: [275, 5],
                    //         style: {
                    //             image: img,
                    //             width: 80,
                    //             height: 80,
                    //             opacity: 0.4
                    //         }
                    //     },
                    //     {
                    //         type: 'image',
                    //         id: 'logo2',
                    //         left: '10%',
                    //         bottom: '2%',
                    //         z: -10,
                    //         bounding: 'raw',
                    //         origin: [875, 15],
                    //         style: {
                    //             image: img,
                    //             width: 60,
                    //             height: 60,
                    //             opacity: 0.4
                    //         }
                    //     }, {
                    //         type: 'image',
                    //         id: 'logo3',
                    //         left: '36%',
                    //         bottom: 0,
                    //         z: -10,
                    //         bounding: 'raw',
                    //         origin: [975, 5],
                    //         style: {
                    //             image: img,
                    //             width: 40,
                    //             height: 40,
                    //             opacity: 0.4
                    //         }
                    //     },
                    //     {
                    //         type: 'image',
                    //         id: 'logo4',
                    //         left: '32%',
                    //         bottom: '10%',
                    //         z: -10,
                    //         bounding: 'raw',
                    //         origin: [76, 76],
                    //         style: {
                    //             image: img,
                    //             width: 50,
                    //             height: 50,
                    //             opacity: 0.4
                    //         }
                    //     },
                    //     {
                    //         type: 'image',
                    //         id: 'logo5',
                    //         left: '40%',
                    //         bottom: '35%',
                    //         z: -10,
                    //         bounding: 'raw',
                    //         origin: [76, 76],
                    //         style: {
                    //             image: img,
                    //             width: 90,
                    //             height: 90,
                    //             opacity: 0.4
                    //         }
                    //     },
                    // ],
                }

                this.scatterChart.setOption(this.option)
            }
        },
    }
</script>
<style lang="scss" scoped>
   
</style>